<template>
  <view class="index-page">
    <u-navbar
      title="我的"
      :background="{ background: '#111723' }"
      title-color="#fff"
      :title-bold="true"
      back-icon-color="#fff"
      :is-back="false"
      :border-bottom="false"
    >
      <template #right>
        <u-icon
          @click="routerPush('my/setting/index')"
          class="navbar-icon"
          name="setting"
          color="#fff"
          size="45"
        ></u-icon
      ></template>
    </u-navbar>
    <view class="top-block">
      <u-avatar :src="userInfo.avatar" :size="111" />
      <view class="wd-6">
        <view class="wd-7">
          <view class="wd-8">
            <text>{{ userInfo.nickname }}</text>
            <!-- <view class="wd-10"><u-icon name="her"></u-icon>未实名</view> -->
          </view>
          <view class="wd-9">{{ userInfo.mobile }}</view>
        </view>
      </view>
    </view>
    <view class="wd-11">
      <view class="wd-12" @click="routerPush('my/invite-friends/index')">
        <view class="wd-13"
          ><image src="@/static/images/m1.png" mode=""></image
        ></view>
        <view class="wd-14">邀请好友</view>
      </view>
      <view class="wd-12" @click="routerPush('my/my-wallet/index')">
        <view class="wd-13"
          ><image src="@/static/images/m2.png" mode=""></image
        ></view>
        <view class="wd-14">钱包中心</view>
      </view>
      <view class="wd-12" @click="routerPush('my/my-compose/compose-list')">
        <view class="wd-13"><image src="@/static/images/m3.png"></image></view>
        <view class="wd-14">我的合成</view>
      </view>
      <view class="wd-12" @click="routerPush('')">
        <view class="wd-13"
          ><image src="@/static/images/m4.png" mode=""></image
        ></view>
        <view class="wd-14">转赠记录</view>
      </view>
    </view>
    <view class="center-block">
      <view class="top">
        <view class="wd-21" @click="copy(userInfo.chain_account)"
          ><image src="@/static/images/fuzhi.png" mode=""></image
        ></view>
        <view style="word-break: keep-all"> 区块链地址:</view
        ><text
          style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
          >{{ userInfo.chain_account }}</text
        >
      </view>
      <view class="bottom">
        <view class="wd-11">
          <view class="wd-12" @click="routerPush('my/my-order/index')">
            <view class="wd-13"
              ><image src="@/static/images/b1.png" mode=""></image
            ></view>
            <view class="wd-14">藏品订单</view>
          </view>
          <view class="wd-12" @click="routerPush('my/message-center/index')">
            <view class="wd-13">
              <view class="badge">{{ state.articleNumber }}</view>
              <image src="@/static/images/b4.png" mode=""></image>
            </view>
            <view class="wd-14">消息中心</view>
          </view>

          <view
            class="wd-12"
            @click="routerPush('my/consignment-record/index')"
          >
            <view class="wd-13">
              <image src="@/static/images/b4.png" mode=""></image>
            </view>
            <view class="wd-14">寄售记录</view>
          </view>
          <view class="wd-12" @click="routerPush('')">
            <view class="wd-13"
              ><image src="@/static/images/b2.png" mode=""></image
            ></view>
            <view class="wd-14">转增中心</view>
          </view>
        </view>
      </view>
    </view>
    <image
      class="photo-block"
      src="https://cdn.uviewui.com/uview/swiper/2.jpg"
    ></image>
    <view class="tab-content">
      <u-tabs
        :list="state.tabList"
        bg-color="transparent"
        :is-scroll="true"
        active-color="#fffeff"
        inactive-color="#909a9d"
        font-size="40"
        v-model="state.tabCurrent"
        @change="change"
      />
    </view>
    <view class="bottom-content">
      <scroll-view
        class="scrool"
        :style="{ height: '1000rpx' }"
        :scroll-y="true"
        lower-threshold="30"
        @scrolltolower="bottomOut()"
      >
        <view class="wrap">
          <CollectionsCard
            v-for="(item, index) in state.list"
            @open="open"
            :key="index"
            :type="String(state.tabCurrent)"
            :obj="item"
          ></CollectionsCard>
        </view>

        <u-loadmore
          :status="state.status"
          icon-type="flower"
          margin-top="30"
          margin-bottom="30"
        />
      </scroll-view>
    </view>
  </view>
  <u-mask :show="state.maskShow"></u-mask>
</template>

<script setup lang="ts">
import index from './index.vue'
import CollectionsCard from './components/CollectionsCard.vue'
import {
  getAllCollectionMyNumbers,
  getMyBoxList,
  getNoReadArticleNumber,
  getMymyCollections
} from '@/api/modules/user'
import empy from '@/components/Empy/index.vue'
import { reactive, onMounted } from 'vue'
import { default as useUserStore } from '@/store/modules/userInfo'
import { storeToRefs } from 'pinia'
// 获取自定义的store
const store = useUserStore()
const { userInfo } = storeToRefs(store)
const state = reactive({
  maskShow: false,
  src: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
  tabList: [
    {
      name: '藏品'
    },
    {
      name: '盲盒'
    }
  ],
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0,
  articleNumber: 0
})

onMounted(() => {
  bottomOut()
  getNoReadArticleNumber().then((result) => {
    state.articleNumber = result.data.count
  })
})
//盲盒一打开
const open = () => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  bottomOut()
}
//触底加载数据
const bottomOut = () => {
  // console.log(1111)
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  const promise =
    state.tabCurrent === 0
      ? // ? getAllCollectionMyNumbers({
        //     page: state.page,
        //     page_size: 6,
        //     user_sale_status: 'all',
        //     sort_rule: 'last_operation_time',
        //     sort_type: 'asc'
        //   })
        getMymyCollections({
          page: state.page,
          page_size: 6
        })
      : getMyBoxList({
          page: state.page,
          page_size: 6
        })
  promise.then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 6) state.status = 'nomore'
    else state.status = 'loading'
    console.log('state.list', state.list)
  })
}

//tab change
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  bottomOut()
}
//复制
const copy = (str: string) => {
  const content = typeof str === 'string' ? str : String(str)
  //#ifndef H5
  uni.setClipboardData({
    data: content,
    success: function () {
      // console.log('success')
    }
  })
}
//跳转设置
const routerPush = (name: string) => {
  if (!name) {
    uni.showToast({
      title: '正在开发中',
      icon: 'error'
    })
    return
  }
  uni.navigateTo({
    url: `/pages/${name}`
  })
}
</script>

<style scoped lang="scss">
.index-page {
  font-style: normal;
  text-align: center;
  padding-bottom: 60rpx;
  .tab-content {
    width: 280rpx;
  }
  .wrap {
    display: flex;
    justify-content: space-between;
    margin: 0 20rpx;
    flex-wrap: wrap;
  }
  .center-block {
    padding: 30rpx;
    .top {
      border-top-right-radius: 30rpx;
      border-top-left-radius: 30rpx;
      height: 100rpx;
      background: linear-gradient(to right, #7d55d4, #2038c6);
      padding-left: 40rpx;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 20rpx;

      image {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
    }
    .bottom {
      border-bottom-right-radius: 30rpx;
      border-bottom-left-radius: 30rpx;
      height: 200rpx;
      background-color: #231f30;
      padding-top: 20rpx;
    }
  }
  .photo-block {
    width: calc(100% - 60rpx);
    height: 240rpx;
  }
  .top-block {
    text-align: left;
    display: flex;
    padding: 50rpx;

    .wd-6 {
      margin-left: 30rpx;
      width: 575rpx;
      padding-left: 26rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
    }

    .wd-7 {
      float: left;
    }

    .wd-8 {
      display: flex;
      font-size: 38rpx;
      color: #fff;
      align-items: center;
    }

    .wd-9 {
      font-size: 24rpx;
      color: #ccc;
      margin-top: 12rpx;
    }
    .wd-10 {
      margin-left: 20rpx;
      font-size: 20rpx;
      width: 100rpx;
      background-color: #bbd0ef;
      height: 30rpx;
      line-height: 30rpx;
      border-radius: 20rpx;
    }
  }
  .wd-11 {
    width: 686rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    padding: 25rpx 0;
    display: flex;
  }

  .wd-12 {
    flex: 1;
    width: 25%;
    float: left;
    text-align: center;
  }

  .wd-12 image {
    user-select: none;
    pointer-events: none;
  }

  .wd-13 {
    text-align: center;
    width: 56rpx;
    margin: 0 auto;
    position: relative;
    .badge {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      right: -40rpx;
      top: -40rpx;
      border-radius: 50%;
      background-color: #7b5ae9;
      color: #fff;
      line-height: 40rpx;
      font-size: 20rpx;
    }
  }

  .wd-13 image {
    user-select: none;
    pointer-events: none;
    width: 56rpx;
    height: 56rpx;
    display: block;
  }

  .wd-14 {
    font-size: 24rpx;
    color: #fff;
    margin-top: 15rpx;
  }
  .navbar-icon {
    margin-right: 20rpx;
  }
}
</style>
